<template>
  <div class="home" id="home">
    <van-notice-bar
      left-icon="volume-o"
      :text="notice"
      scrollable
    />
    <header>今日电影</header>
    <van-tabs v-model="active" animated>
      <van-tab :title="movieName" v-for="(movieName,index) in movieNameList" :key="index">
        <!-- <img src="" alt=""> -->
        <van-row class="content">
          <van-col span="10" class="left">
            <img
              :src="sessionMap[movieName][0].movie.pic"
              :alt="sessionMap[movieName][0].movie.name"
              width="100%"
            />
          </van-col>
          <van-col span="14" class="right">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getSessionList"
            >
              <van-cell v-for="session in sessionMap[movieName]" :key="session.id">
                {{session.startTime}}  {{session.movie.language}}  {{session.hall.name}}  {{session.price}}
                <van-button size="small" text="购票" @click="toSeat(session.id)" color="linear-gradient(to right, #ff6034, #ee0a24)"/>
              </van-cell>
            </van-list>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {fetchList} from '@/api/session'
import { getByKey } from '@/api/webconfig'
import {parseTime} from '@/utils/index'
export default {
  data() {
    return {
      loading: false,
      finished: false,
      active: 0,
      sessionMap:{},
      movieNameList:[],
      notice:'',
      query:{
        "searchType": true,
        "sort": "desc",
        // "endTime": parseTime(new Date().getTime() + (24 * 60 * 60 * 1000)),
        "startTime": parseTime(new Date())
      }
    };
  },
  created() {
    this.getSessionList() 
    this.init()
  },
  methods: {
    async getSessionList(){ // 获取场次列表
      await fetchList(this.query).then(response => {
        if (response.code === '200') {
          this.sessionMap = response.data.map
          this.finished = true
        }
      })
      this.movieNameList = Object.keys(this.sessionMap)
      console.log(this.sessionMap[this.movieNameList[0]])
    },
    toSeat(id) {
        this.$router.push(`/seats/${id}`)
    },
    async init() { // 初始化
      await getByKey('notice').then((response) => {
        if (response.code === '200') {
          // 初始化通知的值
          this.notice = response.data
        }
      })
    },
  }
};
</script>

<style scoped lang="less">
.home {
  /deep/ .van-tab__text--ellipsis {
    font-size: 1rem;
  }
  header {
    color: orange;
    font-size: 1.8rem;
    text-align: center;
  }
  .content {
    .left {
      margin-top: 1rem;
    }
    .right {
      margin-top: 1rem;
      ul {
        li {
        background: chartreuse;
        text-align: left;
        padding-left: 1rem;
        font-size: 0.7rem;
        height: 2rem;
        line-height: 2rem;
        overflow: hidden;
        margin-bottom: 1rem;
      }
      }
    }
  }
}
</style>